<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <style>
    ul, li {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
    }
    .container {
      padding: 20px 50px;
      min-width: 1200px;
      overflow: hidden;
    }
    .section {
      clear: both;
      margin-bottom: 40px;
    }
    .container h2 {
      font-size: 18px;
      color: #333;
      padding: 10px;
      border-bottom: 1px solid #eee;
    }
    .container h2 span{
      font-size: 18px;
      color: #999999;
    }
    .icon-list {
      overflow: hidden;
    }
    .icon-item {
      float: left;
      margin: 0 10px 10px 0;
      width: 64px;
    }
    .section p {
      font-size: 14px;
      color: #666;
    }
    .icon-wrapper {
      width: 64px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      background: #fafafa;
      border-radius: 2px;
      font-size: 29px;
      display: block;
    }
    .icon-text {
      font-size: 12px;
      display: block;
      text-align: center;
      margin-top: 5px;
      width: 64px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
  <title>iconcool</title>
</head>
<body>
  <div class="container">
    <h2>iconcool</h2>

    <section class="section">
      <ul class="icon-list">
        <li class="icon-item" title=" tongzhi-shi">
          <span class="icon-wrapper bk-icon- tongzhi-shi"></span>
          <span class="icon-text"> tongzhi-shi</span>
        </li>
        <li class="icon-item" title="anquan-shi">
          <span class="icon-wrapper bk-icon-anquan-shi"></span>
          <span class="icon-text">anquan-shi</span>
        </li>
        <li class="icon-item" title="bangzhu-shi">
          <span class="icon-wrapper bk-icon-bangzhu-shi"></span>
          <span class="icon-text">bangzhu-shi</span>
        </li>
        <li class="icon-item" title="caozuojilu">
          <span class="icon-wrapper bk-icon-caozuojilu"></span>
          <span class="icon-text">caozuojilu</span>
        </li>
        <li class="icon-item" title="chengxu">
          <span class="icon-wrapper bk-icon-chengxu"></span>
          <span class="icon-text">chengxu</span>
        </li>
        <li class="icon-item" title="chuliren">
          <span class="icon-wrapper bk-icon-chuliren"></span>
          <span class="icon-text">chuliren</span>
        </li>
        <li class="icon-item" title="cuowu-shi">
          <span class="icon-wrapper bk-icon-cuowu-shi"></span>
          <span class="icon-text">cuowu-shi</span>
        </li>
        <li class="icon-item" title="cuowu">
          <span class="icon-wrapper bk-icon-cuowu"></span>
          <span class="icon-text">cuowu</span>
        </li>
        <li class="icon-item" title="fengxianhanshu-shi">
          <span class="icon-wrapper bk-icon-fengxianhanshu-shi"></span>
          <span class="icon-text">fengxianhanshu-shi</span>
        </li>
        <li class="icon-item" title="fengxianwenjian-shi">
          <span class="icon-wrapper bk-icon-fengxianwenjian-shi"></span>
          <span class="icon-text">fengxianwenjian-shi</span>
        </li>
        <li class="icon-item" title="guolv">
          <span class="icon-wrapper bk-icon-guolv"></span>
          <span class="icon-text">guolv</span>
        </li>
        <li class="icon-item" title="jia">
          <span class="icon-wrapper bk-icon-jia"></span>
          <span class="icon-text">jia</span>
        </li>
        <li class="icon-item" title="jian">
          <span class="icon-wrapper bk-icon-jian"></span>
          <span class="icon-text">jian</span>
        </li>
        <li class="icon-item" title="lingdang">
          <span class="icon-wrapper bk-icon-lingdang"></span>
          <span class="icon-text">lingdang</span>
        </li>
        <li class="icon-item" title="jiantou">
          <span class="icon-wrapper bk-icon-jiantou"></span>
          <span class="icon-text">jiantou</span>
        </li>
        <li class="icon-item" title="liushuixian">
          <span class="icon-wrapper bk-icon-liushuixian"></span>
          <span class="icon-text">liushuixian</span>
        </li>
        <li class="icon-item" title="moren-shi">
          <span class="icon-wrapper bk-icon-moren-shi"></span>
          <span class="icon-text">moren-shi</span>
        </li>
        <li class="icon-item" title="mulu">
          <span class="icon-wrapper bk-icon-mulu"></span>
          <span class="icon-text">mulu</span>
        </li>
        <li class="icon-item" title="paixu">
          <span class="icon-wrapper bk-icon-paixu"></span>
          <span class="icon-text">paixu</span>
        </li>
        <li class="icon-item" title="pingjuzhi-shi">
          <span class="icon-wrapper bk-icon-pingjuzhi-shi"></span>
          <span class="icon-text">pingjuzhi-shi</span>
        </li>
        <li class="icon-item" title="qushi">
          <span class="icon-wrapper bk-icon-qushi"></span>
          <span class="icon-text">qushi</span>
        </li>
        <li class="icon-item" title="sanjiao">
          <span class="icon-wrapper bk-icon-sanjiao"></span>
          <span class="icon-text">sanjiao</span>
        </li>
        <li class="icon-item" title="shezhi">
          <span class="icon-wrapper bk-icon-shezhi"></span>
          <span class="icon-text">shezhi</span>
        </li>
        <li class="icon-item" title="shijian-shi">
          <span class="icon-wrapper bk-icon-shijian-shi"></span>
          <span class="icon-text">shijian-shi</span>
        </li>
        <li class="icon-item" title="shijian">
          <span class="icon-wrapper bk-icon-shijian"></span>
          <span class="icon-text">shijian</span>
        </li>
        <li class="icon-item" title="sousuo">
          <span class="icon-wrapper bk-icon-sousuo"></span>
          <span class="icon-text">sousuo</span>
        </li>
        <li class="icon-item" title="tishi-shi">
          <span class="icon-wrapper bk-icon-tishi-shi"></span>
          <span class="icon-text">tishi-shi</span>
        </li>
        <li class="icon-item" title="tishi">
          <span class="icon-wrapper bk-icon-tishi"></span>
          <span class="icon-text">tishi</span>
        </li>
        <li class="icon-item" title="tiaozhuanlianjie">
          <span class="icon-wrapper bk-icon-tiaozhuanlianjie"></span>
          <span class="icon-text">tiaozhuanlianjie</span>
        </li>
        <li class="icon-item" title="weixian">
          <span class="icon-wrapper bk-icon-weixian"></span>
          <span class="icon-text">weixian</span>
        </li>
        <li class="icon-item" title="weixian1-shi">
          <span class="icon-wrapper bk-icon-weixian1-shi"></span>
          <span class="icon-text">weixian1-shi</span>
        </li>
        <li class="icon-item" title="weixian1">
          <span class="icon-wrapper bk-icon-weixian1"></span>
          <span class="icon-text">weixian1</span>
        </li>
        <li class="icon-item" title="wenjian">
          <span class="icon-wrapper bk-icon-wenjian"></span>
          <span class="icon-text">wenjian</span>
        </li>
        <li class="icon-item" title="wenjianjia">
          <span class="icon-wrapper bk-icon-wenjianjia"></span>
          <span class="icon-text">wenjianjia</span>
        </li>
        <li class="icon-item" title="xiangshang-shi">
          <span class="icon-wrapper bk-icon-xiangshang-shi"></span>
          <span class="icon-text">xiangshang-shi</span>
        </li>
        <li class="icon-item" title="xinxi">
          <span class="icon-wrapper bk-icon-xinxi"></span>
          <span class="icon-text">xinxi</span>
        </li>
        <li class="icon-item" title="zhengque-shi">
          <span class="icon-wrapper bk-icon-zhengque-shi"></span>
          <span class="icon-text">zhengque-shi</span>
        </li>
        <li class="icon-item" title="zhengque">
          <span class="icon-wrapper bk-icon-zhengque"></span>
          <span class="icon-text">zhengque</span>
        </li>
      </ul>
    </section>

    <h2>为什么使用</h2>
    <section class="section">
      <p>- 弹性，在网页或者 app 上，展示字体是很便捷的。用 字体图标 可以很方便的改变 icon 的颜色，或者加入一些其他的效果</p>
      <p>- 可缩放，可以很方便的改变图标的大小</p>
      <p>- 矢量，字体图标 是矢量的并且具有独立的分辨率，不管在高分辨率还是低分辨率，不管是在网页还是手机端，都具有很好的展示效果，不会出现锯齿或者马赛克模糊</p>
      <p>- 节省加载时间，字体图标 很小，每个小图标只有几 kb，大大节省了加载时间</p>
    </section>

    <h2>如何使用</h2>
    <section class="section">
      <p>- 将整个目录复制到您的项目里</p>
      <p>- 引入style.css</p>
      <p>- 挑选相应图标并获取类名，如.bk-icon .icon-demo</p>
    </section>
  </div>
</body>
</html>